// 引入了插件 router-loadable 目的是为了实现路由懒加载
// 因此可以编写一个统一的配置文件
// 本文件下以下的所有注释的代码都是 异步操作

import React from "react";
import { Redirect } from "react-router-dom";

import RouteComponents from "./components";
// import AsyncComponent from '@/components/AsyncComponent'

function getToken() {
  return sessionStorage.getItem("token");
}

const routes = [
  // {..., ..., component: AsyncComponent(() => import('@/views/Login'))}
  { path: "/login2", requireAuth: false, component: RouteComponents.Login2 },

  // {..., ..., component: AsyncComponent(() => import('@/views/Login/login2'))}
  { path: "/login", requireAuth: false, component: RouteComponents.Login },

  // {..., ..., component: AsyncComponent(() => import('@/views/Login/forget'))}
  { path: "/forget", requireAuth: false, component: RouteComponents.Forget },

  // {..., ..., component: AsyncComponent(() => import('@/views/NotFound/404'))}
  { path: "/404", requireAuth: false, component: RouteComponents.NotFound },
  {
    // 异步操作
    // component: AsyncComponent(() => import('@/views/Layout')),
    // component: Loadable({ loader: () => import('@/views/Layout'), loading() { return <Spin /> }}),
    render: (props) => {
      const token = getToken();
      if (!token) {
        return <Redirect to="/login" />;
      }

      return <RouteComponents.Layout {...props} />;
    },
    requireAuth: true,
    // 路由嵌套 类似于 Vue 中的路由嵌套
    routes: [
      { path: "/", exact: true, render: () => <Redirect to="/home" /> },
      { path: "/home", exact: true, component: RouteComponents.Home },
      { path: "/user", exact: true, component: RouteComponents.User },
      { path: "/roles", exact: true, component: RouteComponents.Role },
      {
        path: "/website-setting",
        exact: true,
        // component: AsyncComponent(() => import('@/views/Setting/websiteSetting'))
        component: RouteComponents.WebsiteSetting,
      },
      {
        path: "/email-service",
        exact: true,
        // component: AsyncComponent(() => import('@/views/Setting/emailService'))
        component: RouteComponents.EmailService,
      },
      {
        path: "/basic-info",
        exact: true,
        // component: AsyncComponent(() => import('@/views/Setting/basicInfo'))
        component: RouteComponents.BasicInfo,
      },
      {
        path: "/modify-password",
        exact: true,
        // component: AsyncComponent(() => import('@/views/Setting/modifyPassword'))
        component: RouteComponents.ModifyPassword,
      },
      {
        path: "/message",
        exact: true,
        // component: AsyncComponent(() => import('@/views/Community/message'))
        // component: Loadable({ loader: () => import('@/views/Community/message'), loading() { return <Spin /> }})
        component: RouteComponents.Message,
      },
      { path: "/articles", component: RouteComponents.Article },
      { path: "/category", component: RouteComponents.Category },
      { path: "/comments", component: RouteComponents.Comment },
      { path: "*", render: () => <Redirect to="/404" /> },
    ],
  },
  { path: "*", component: RouteComponents.NotFound },
];

export default routes;
